<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="com.tianye.salon.util.ProfileUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="base" value='${pageContext.request.contextPath}'></c:set>
<c:set var="uid" value='${uid}'></c:set>
<%
String baseImgUrl = ProfileUtil.getInstance().read("prop.properties", "baseImgUrl");
request.setAttribute("baseImgUrl", baseImgUrl);
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="/static/sass/common/ydui.css" />
    <link rel="stylesheet" href="/static/sass/common/dropload.css" />
    <link rel="stylesheet" href="/static/stylesheets/user/order.css" />
    <style>
        .noabs{position: inherit !important; transform: translateX(0) !important; -webkit-transform: translateX(0) !important;}
        body, html {height: auto;}
    </style>
    <!-- 引入自适应解决方案类库 -->
    <script src="/static/scripts/libs/ydui.flexible.js"></script>
</head>
<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box">
            <!-- tab -->
            <div class="m-tab">
                <ul class="tab-nav tab" id="tab" style="position: fixed; top: 0; left: 0; z-index: 2; width: 100%;">
                    <li class="tab-nav-item item tab-active"><a href="javascript:;">全部</a></li>
                    <li class="tab-nav-item item"><a href="javascript:;">待支付</a></li>
                    <li class="tab-nav-item item"><a href="javascript:;">待发货</a></li>
                    <li class="tab-nav-item item"><a href="javascript:;">待收货</a></li>
                    <li class="tab-nav-item item"><a href="javascript:;">待评价</a></li>
                </ul>
                <div class="tab-panel content" style="margin-top: 0.85rem">
                    <!-- tab 1 -->
                    <div class="tab-panel-item noabs">
                        <!-- 订单列表 -->
                        <c:if test="${fn:length(orders) == 0}">
                        	<div class="order_list">
                        		<div class="order_no"></div>
                       			<p class="gray">目前没有相关订单</p>
                      		</div>
                        </c:if>
                        <c:if test="${fn:length(orders) > 0}">
                        		<c:forEach items="${orders}" var="item" varStatus="vs">
                        		<div class="order_list" id="orderlist${item.id}">
                        			<div class="m-cell mb_0">
		                                <div class="cell-item">
		                                    <div class="cell-left gray">订单编号：<spn>${item.orderNum}</span></div>
		                                    <div class="cell-right" id="status${item.id}">
		                                        <c:if test="${item.status == 10 and  item.payStatus ==1 and  item.expressStatus == 99}">
		                                        	待评论
		                                        </c:if>
		                                        <c:if test="${item.status == 2 }">
		                                        	已过期
		                                        </c:if>
		                                        <c:if test="${item.status == 99 }">
		                                        	已评论
		                                        </c:if>
		                                        <c:if test="${item.status == 1 }">
		                                        	已取消
		                                        </c:if>
		                                        <c:if test="${item.status == 10 and item.payStatus ==1 and  item.expressStatus == 0 }">
		                                        	待发货
		                                        </c:if>
		                                        <c:if test="${item.status == 10 and item.payStatus ==0  }">
		                                        	待支付
		                                        </c:if>
		                                        <c:if test="${item.status == 10 and  item.payStatus ==1 and  item.expressStatus == 1 }">
		                                        	待签收
		                                        </c:if>
		                                        <c:if test="${item.status == 10 and  item.payStatus ==10 }">
		                                        	已退款
		                                        </c:if>
		                                    </div>
		                                </div>
		                            </div>
		                            <!-- list -->
		                            <c:set var="goodsNum" value="0"/>
		                            <article class="m-list list-theme4 lists">
		                            	<c:if test="${fn:length(item.goods) > 0 }">
		                            		<c:forEach items="${item.goods}" var="goods" varStatus="vs">
		                            			<a href="#" class="list-item">
				                                    <div class="list-img">
				                                        <img src="${baseImgUrl}${goods.image }">
				                                    </div>
				                                    <div class="list-mes detail">
				                                        <h3 class="list-title">${goods.goodsName }</h3>
				                                        <div class="list-mes-item disc">
				                                            <div>
				                                                <span class="list-price"><em>¥</em>${goods.discountUnitPrice }</span>
				                                                <span class="list-del-price">¥${goods.unitPrice }</span>
				                                            </div>
								                            <c:set var="goodsNum" value="${goodsNum+goods.buyNum }"/>
				                                            <div>x${goods.buyNum }</div>
				                                        </div>
				                                    </div>
				                                </a>
		                            		</c:forEach>
		                            	</c:if>
		                            </article>
		                            <!-- total -->
		                            <div class="cell-item" style="height: 55px;background: #fff;">
		                                <p style="width: 100%; text-align: center; font-size: .3rem;">共${goodsNum }件商品 合计：<span style="color: #dc1210;">￥${item.payCash }</span> (含运费：${item.payExpress })</p>
		                            </div>
		                            <div class="cell-item" style="background: #fff;">
		                                <div class="cell-left gray"></div>
		                                <div class="cell-right pr_0">
		                                	<c:if test="${item.status == 1 or item.status == 2 }">
			                                    <a href="javascript:;" class="btn btn-danger del" data="${item.id}" style="height:100%; line-height:55px; width: 90px;">删除订单</a>
		                                	</c:if>
		                                	<c:if test="${item.status == 10 and item.payStatus == 0 }">
			                                	<a href="javascript:;" class="btn btn-warning bd_radius_0 warning" data="${item.id}"  style="height:100%; line-height:55px; width: 90px;">取消订单</a>
			                                	<a href="javascript:;" class="btn btn-primary bd_radius_0 success" data="${item.id}"  style="height:100%; line-height:55px; width: 85px;">立即支付</a>
		                                	</c:if>
		                                	<c:if test="${item.status == 10 and item.payStatus == 1 and item.expressStatus == 99 }">
			                                    <a href="${base}/order/precomment?uid=${uid}&orderId=${item.id}" class="btn btn-primary comment" style="height:100%; line-height:55px; width: 80px;">评价</a>
		                                	</c:if>
		                                </div>
		                            </div>
		                           </div>
                        		</c:forEach>
                        	</c:if>
                    </div>
                    
                    <!-- tab 2 -->
                    <div class="tab-panel-item noabs" style="display: none;">
                        <!-- 待支付 -->
                    </div>
                    <!-- tab 3 -->
                    <div class="tab-panel-item noabs" style="display: none;">
                        <!-- 待发货 -->
                    </div>
                    <!-- tab 4 -->
                    <div class="tab-panel-item noabs" style="display: none;">
                        <!-- 交易成功 -->
                    </div>
                    <!-- tab 5 -->
                    <!-- 评论 -->
                    <div class="tab-panel-item noabs" style="display: none;">
                        <!-- 交易成功 -->
                    </div>
                </div>
            </div>

        </section>

    </div>
</body>    
<!-- 引入jQuery 2.0+ -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="/static/scripts/libs/ydui.citys.js"></script>
<script src="/static/scripts/libs/ydui.js"></script>
<script src="/static/scripts/libs/dropload.js"></script>

<script>
//    var $tab = $('#J_Tab');
//
//    $tab.tab({
//        nav: '.tab-nav-item',
//        panel: '.tab-panel-item',
//        activeClass: 'tab-active'
//    });
//
//    $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
//        console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
//    });
//
//    $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
//        console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
//    });
</script>
<script>
$(function(){

    var itemIndex = 0;
    var tmpIndex = 0;
    var tabLoadEndArray = [false, false, false, false, false];
    var tabLenghtArray = [28, 15, 47, 10, 10, 10]; //每个tab最多加载多少个
    var pageArray = [1, 0, 0, 0, 0, 0]; //每个tab当前页数
    var tabScroolTopArray = [0, 0, 0, 0, 0];
    // tab
    $('.tab .item').on('click',function(){
    	console.log("====点击事件执行了======")
        tabScroolTopArray[itemIndex] = $(window).scrollTop();
        var $this = $(this);
        itemIndex = $this.index();
        console.log(itemIndex)
        $(window).scrollTop(tabScroolTopArray[itemIndex]);
        $this.addClass('tab-active').siblings().removeClass('tab-active');
        $('.tab-panel-item').eq(itemIndex).show().siblings('.tab-panel-item').hide();

        if (!tabLoadEndArray[itemIndex]) {
            dropload.unlock();
            dropload.noData(false);
        } else {
            dropload.lock('down');
            dropload.noData();
        }
        // 重置
        dropload.resetload();
    });
    $(".del").on("click",function(){
    	var $this = $(this);
    	var orderId = $this.attr("data");
    	deleteOrder(orderId)
    });
    $(".warning").on("click",function(){
    	var $this = $(this);
    	var orderId = $this.attr("data");
    	cancelOrder(orderId)
    });
    // dropload
    var dropload = $('.content').dropload({
        scrollArea: window,
        domDown: {
            domClass: 'dropload-down',
            domRefresh: '<div class="dropload-refresh">上拉加载更多</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData: '<div class="dropload-noData">已无数据</div>'
        },
        loadDownFn: function (me) {
            setTimeout(function () {
            	pageArray[itemIndex] ++;
            	if (tabLoadEndArray[itemIndex]) {
                    me.resetload();
                    me.lock();
                    me.noData();
                    me.resetload();
                    return;
                }
                var url = "${base}/order/getorders?uid=${uid}&page="+pageArray[itemIndex]+"&size=3&status="+itemIndex;
                if (itemIndex == 0) {
                	url = "${base}/order/getorders?uid=${uid}&page="+pageArray[itemIndex]+"&size=3";
                }
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function(resp){
                        console.log("请求"+pageArray[itemIndex]+"页数据成功"+resp.data);
                        let shtml = '';
                        if(resp.code == 0 && resp.data.length == 0){
                        	tabLoadEndArray[itemIndex] = true;
                        	if(pageArray[itemIndex] == 1){
                        		shtml += '<div class="order_list">';
                        		shtml += '<div class="order_no"></div>';
                        		shtml += '<p class="gray">目前没有相关订单</p></div>';
                        	}
                        }
                        if(resp.code == 0 && resp.data.length > 0){
                        	for(var i = 0; i < resp.data.length; i ++){
                        		var item = resp.data[i];
                        		var status = "";
                                if (item.status == 10 &&  item.payStatus ==1 &&  item.expressStatus == 99){
                                	status = "待评论";
                                }
                                if (item.status == 2){
                                	status = "已过期";
                                }
                                if (item.status == 99){
                                	status = "已评论";
                                }
                                if (item.status == 1){
                                	status = "已取消";
                                }
                                if (item.status == 10 &&  item.payStatus ==1 &&  item.expressStatus == 0){
                                	status = "待发货";
                                }
                                if (item.status == 10 &&  item.payStatus ==0){
                                	status = "待支付";
                                }
                                if (item.status == 10 &&  item.payStatus ==1 &&  item.expressStatus == 1){
                                	status = "待签收";
                                }
                                if (item.status == 10 &&  item.payStatus ==10 ){
                                	status = "已退款";
                                }
	                            shtml += '<div class="order_list" id="orderlist'+item.id+'">';
	                            shtml += '    <!-- title -->';
	                            shtml += '    <div class="m-cell mb_0">';
	                            shtml += '        <div class="cell-item">';
	                            shtml += '            <div class="cell-left gray">订单编号：<spn>'+item.orderNum+'</span></div>';
	                            shtml += '            <div class="cell-right" id="status'+item.id+'">';
	                            shtml +=  status;
	                            shtml += '            </div>';
	                            shtml += '        </div>';
	                            shtml += '    </div>';
	                            shtml += '    <!-- list -->';
	                            shtml += '    <article class="m-list list-theme4 lists">';
	                            var goodsNum = 0;
	                            for(var j = 0; j < item.goods.length; j ++){
	                            	var goods = item.goods[j];
	                            	goodsNum += Number(goods.buyNum);
		                            shtml += '        <a href="#" class="list-item">';
		                            shtml += '            <div class="list-img">';
		                            shtml += '                <img src="${baseImgUrl}'+goods.image+'">';
		                            shtml += '            </div>';
		                            shtml += '            <div class="list-mes detail">';
		                            shtml += '                <h3 class="list-title">'+goods.goodsName+'</h3>';
		                            shtml += '                <div class="list-mes-item disc">';
		                            shtml += '                    <div>';
		                            shtml += '                        <span class="list-price"><em>¥</em>'+goods.discountUnitPrice+'</span>';
		                            shtml += '                        <span class="list-del-price">¥'+goods.unitPrice+'</span>';
		                            shtml += '                    </div>';
		                            shtml += '                    <div>x'+goods.buyNum+'</div>';
		                            shtml += '                </div>';
		                            shtml += '            </div>';
		                            shtml += '        </a>';
	                            }
	                            shtml += '    </article>';
	                            shtml += '    <!-- total -->';
	                            shtml += '    <div class="cell-item" style="height: 55px;background: #fff;">';
	                            shtml += '        <p style="width: 100%; text-align: center; font-size: .3rem;">共'+goodsNum+'件商品 合计：<span style="color: #dc1210;">￥300.00</span> (含运费：0.00)</p>';
	                            shtml += '    </div>';
	                            shtml += '    <div class="cell-item" style="background: #fff;">';
	                            shtml += '        <div class="cell-left gray"></div>';
	                            shtml += '        <div class="cell-right pr_0">';
	                            if(item.status == 1 || item.status == 2){
		                            shtml += '            <a href="javascript:;" data="'+item.id+'" class="btn btn-danger del" style="height:100%; line-height:55px; width: 90px;">删除订单</a>';
	                            }
	                            if(item.status == 10 && item.payStatus == 0 ){
		                            shtml += '<a href="javascript:;" class="btn btn-warning bd_radius_0 warning" data="'+item.id+'"  style="height:100%; line-height:55px; width: 90px;">取消订单</a>';
		                            shtml += '<a href="javascript:;" class="btn btn-primary bd_radius_0 success" data="'+item.id+'"  style="height:100%; line-height:55px; width: 85px;">立即支付</a>';
	                            }
	                            if(item.status == 10 && item.payStatus == 1 && item.expressStatus == 99 ){
		                            shtml += '<a href="${base}/order/precomment?uid=${uid}&orderId='+item.id+'" class="btn btn-primary comment" style="height:100%; line-height:55px; width: 80px;">评价</a>';
	                            }
	                            shtml += '        </div>';
	                            shtml += '    </div>';
	                            shtml += '</div>';
                        		
                        	}
                        }
		                $('.tab-panel-item').eq(itemIndex).append(shtml);
		                $(".del").unbind("click");
		                $(".warning").unbind("click");
		                $(".del").on("click",function(){
		                	var $this = $(this);
		                	var orderId = $this.attr("data");
		                	deleteOrder(orderId);
		                });
		                $(".warning").on("click",function(){
		                	var $this = $(this);
		                	var orderId = $this.attr("data");
		                	cancelOrder(orderId);
		                });
		                me.resetload();
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }, 500);
        }
    });
    
    
function deleteOrder(id){
	var url = "${base}/order/delete?orderId="+id+"&uid="+${uid};
	$.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        success: function(resp){
			if(resp.code == 0){
	        	$("#orderlist"+id).remove();
			}else{
				alert("删除失败");
			}
        },
        error: function(xhr, type){
            alert('Ajax error!');
        }
	});
}

function cancelOrder(id){
	var url = "${base}/order/cancel?orderId="+id+"&uid="+${uid};
	$.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        success: function(resp){
			if(resp.code == 0){
				location.reload();
			}else{
				alert("取消失败");
			}
        },
        error: function(xhr, type){
            alert('Ajax error!');
        }
	});
}
});
</script>
</html>
